﻿<template>
    <div class="grWorkCard">
        <div class="elscrollbar_gg" :style="{'height': (tableH - 20) + 'px'}">
            <div style="height:80px">
                <el-scrollbar style="height:100%">
                    <div style="display: flex; align-items: center;margin-bottom:5px">
                        <div style="min-width: 70px; margin-block: auto; font-weight: 700; font-size: 16px; font-family: 'Noto Sans SC'; color: #303133;">试验结果</div>
                        <el-button size="mini" @click="save" style="margin-left:10px" v-if="subTaskInfo.sTaskID" type="success">全部保存</el-button>
                        <el-button size="mini" @click="downloadAllFile" v-if="subTaskInfo.sTaskID" type="primary">批量下载</el-button>
                    </div>
                    <el-descriptions v-loading="loading"
                                     element-loading-background="rgba(0, 0, 0, 0)"
                                     class="margin-top"
                                     :title="taskTitle"
                                     :column="3"
                                     border
                                     :labelStyle="{'width': '100px'}"
                                     :contentStyle="{'width': '250px'}">
                        <el-descriptions-item v-for="item of items" :key="item.value" :label="item.label">
                            <el-input style="width:200px;" placeholder="" v-model="resultInfo[item.value]" size="mini" />
                            {{ item.unit }}
                            <!--<div v-if="!editNum">
                {{ resultInfo[item.value] }}{{ item.unit }}
            </div>
            <div v-else>
                <el-input style="width:200px;" placeholder="" v-model="taskInfo[item.value]" size="mini" />
                {{ item.unit }}
            </div>-->
                        </el-descriptions-item>
                    </el-descriptions>
                </el-scrollbar>
            </div>
            <div class="elscrollbar_gg" :style="{'height': tableH -115 + 'px'}">
                <el-row>
                    <el-col v-for="item of graphicText" :key="item.value" :span="item.span">

                        <el-card v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)" class="shipTypeCard" style="margin:5px">
                            <div slot="header">
                                <div class="fileTitle">
                                    <span class="filtType">{{ item.label }}</span>
                                </div>
                            </div>
                            <el-tabs v-model="item.activeTab" type="border-card" style="margin-top: 0px;">
                                <el-tab-pane label="描述" :name="1">
                                    <div style="height:300px;">
                                        <el-input type="textarea"
                                                  style="font-size: 16px;"
                                                  :rows="12"
                                                  placeholder="请输入内容"
                                                  v-model="item.textarea">
                                        </el-input>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="文件" :name="2">
                                    <div style="height:300px">
                                        <div class="flex alignItemCenter flexEnd">
                                            <div class="fileUploadText" style="margin: 0px 15px 10px 0px" v-if="subTaskInfo.sTaskID" @click="uploadFile(item)">上传</div>
                                        </div>
                                        <div class="filerow" style="background-color: #e4ecfc ">
                                            <el-checkbox size="medium " v-model="item.checked" @change="selectAllFile(item)"></el-checkbox>
                                            <div class="fontWeight600" style="margin-left:15px;color: #000000; width: 40px; font-size:14px; text-align: left">序号</div>
                                            <div class="filename fontWeight600" style="color: #000000;text-align: center">文件名</div>
                                            <div class="marginL6 fontWeight600" style="width: 80px; font-size: 14px; color: #000000; text-align: center">上传时间</div>
                                        </div>
                                        <div class="elscrollbar_gg" :style="{'height': '215px'}">
                                            <el-scrollbar style="height:100%">
                                                <div v-for="(row, i) of item.fileList" :key="i" :class="fileClass(row)">
                                                    <el-checkbox size="medium " v-model="row.checked" @change="selectFile(row,item)"></el-checkbox>
                                                    <div style="width: 60px; font-size: 14px; margin-left: 15px;">{{ i +1 + ')' }}</div>
                                                    <div class="filename" :title="row.fileName" @click="preview(row)">{{ row.fileName }}</div>
                                                    <div class="filedate" style="width:80px;text-align:center">{{ toDate(row.createTime) }}</div>
                                                    <div class="fileOptionViewHide">
                                                        <!--<div class="fileoption" @click="preview(item)">预览</div>-->
                                                        <div class="fileoption" @click="download(row)">下载</div>
                                                        <div class="fileoption" style="color:red" @click="deleteFile(row)">
                                                            删除
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-scrollbar>
                                        </div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>


                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
        <encryptionUpLoad ref="encryptionUpLoad" :isMultiple="true" :fatherID="fatherID" :uploadUrl="fileUrl" :fileTypeInfo="filetype" @uploadOver="uploadOver" />
        <showPdf ref="showPdf" :url="filePdfUrl" :pdfType="pdfType" />
    </div>

</template>
<script>
    import prjAPI from '../../../request/Project/PrjAPI.js';
    import template from '../../../common/json/template.js';
    import encryptionUpLoad from '../../../components/EncryptionUpLoad/index.vue';
    import showPdf from '../../General/ShowPdf.vue';
    export default {
        props: {
            canEdit: { type: String, default: false },
            taskInfo: { type: Object, default: null },
            subTaskInfo: { type: Object, default: null },
            tableH: { type: Number, default: 0 },
        },
        components: {
            encryptionUpLoad,
            showPdf
        },
        data() {
            return {
                activeTab: 1,
                template,
                loading: false,
                taskTitle: '',
                editNum: false,
                filelist: [],
                fatherID: '',
                fileUrl: '',
                filetype: '',
                filePdfUrl: '',
                pdfType: '',
                resultInfo: {
                    laserResultID: '',
                    taskID: '',
                    prjID: '',
                    sTaskID:'',
                    cleanLevel: '',
                    saltConcentration: '',
                    roughness: '',
                    paintType: '',
                    surfaceChange: '',
                    morphologyBefore: '',
                    morphologyAfter: '',
                    microMorphology: '',
                    microstructure: '',
                    surfaceHardness: '',
                    stretchingPerform: '',
                    impactPerform: '',
                    reamrk: ''
                },
                items: [
                    { label: '除锈等级', value: 'cleanLevel', unit: '' },
                    { label: '水溶性盐浓度', value: 'saltConcentration', unit: '(mg/m2)' },
                    { label: '粗糙度', value: 'roughness', unit: '(μm)' },
                ],
                graphicText: [],
            };
        },
        watch: {
            subTaskInfo(data) {
                if (data) {
                    this.getData();
                }
            },
        },
        created() {
        },
        mounted() {
            this.fileUrl = requestURL + '/TestResultFileUpDnld/Upload/';
            //this.getData();
            //this.items = template.testTypeOption.filter(x => x.value < 4);
            this.graphicText = template.testTypeOption.filter(x => x.value > 3);
            if (!this.resultInfo.laserResultID) {

            }
            //this.setTableColumn();
            //this.initRowDrop();
            //this.getData();
            if (this.workCardInfo) {
                //this.getData(0);
                //this.getAllRepairMeasure();
            }
        },
        beforeDestroy() {
        },
        methods: {
            visibilityChange() {

            },
            getData() {
                if (!this.subTaskInfo.sTaskID) {
                    this.tableData = [];
                    this.resultInfo = {
                        laserResultID: '',
                        taskID: this.taskInfo.taskID,
                        prjID: this.taskInfo.prjID,
                        sTaskID: this.subTaskInfo.sTaskID,
                        cleanLevel: '',
                        saltConcentration: '',
                        roughness: '',
                        paintType: '',
                        surfaceChange: '',
                        morphologyBefore: '',
                        morphologyAfter: '',
                        microMorphology: '',
                        microstructure: '',
                        surfaceHardness: '',
                        stretchingPerform: '',
                        impactPerform: '',
                        reamrk: '',
                        isDelete: false,
                    };
                    return false
                };
                this.tableData = [];
                this.loading = true;
                var params = {
                    staskID: this.subTaskInfo.sTaskID
                };
                prjAPI.getLaserResultList(params).then(res => {
                    if (res.laserResultID == 0) {
                        this.resultInfo = {
                            laserResultID: '',
                            taskID: this.taskInfo.taskID,
                            prjID: this.taskInfo.prjID,
                            sTaskID: this.subTaskInfo.sTaskID,
                            cleanLevel: '',
                            saltConcentration: '',
                            roughness: '',
                            paintType: '',
                            surfaceChange: '',
                            morphologyBefore: '',
                            morphologyAfter: '',
                            microMorphology: '',
                            microstructure: '',
                            surfaceHardness: '',
                            stretchingPerform: '',
                            impactPerform: '',
                            reamrk: '',
                            isDelete: false,
                        };
                        prjAPI.createLaserResult(this.resultInfo).then(resa => {
                            this.getData();
                        }).catch(err => {
                            this.loading = false;
                        });
                    } else {
                        this.resultInfo = res;
                        this.graphicText.map(x => {
                            x.textarea = res[x.field]
                            return x
                        });
                        this.getFiles();
                    }
                    this.loading = false;

                }).catch(err => {
                    this.loading = false;
                });
            },
            edit() {
                this.editNum = true;
                if (this.resultInfo.laserResultID) {
                    prjAPI.getLaserResultByID(this.resultInfo.laserResultID).then(res => {
                        this.resultInfo = res;
                    });
                }
            },
            save() {
                this.graphicText.forEach((x, i) => {
                    if (!!x.textarea) {
                        this.resultInfo[x.field] = x.textarea
                    }
                });
                this.loading = true;
                prjAPI[this.resultInfo.laserResultID ? 'updateLaserResult' : 'createLaserResult'](this.resultInfo).then(res => {
                    if (res) {
                        this.$message({ type: 'success', message: '修改成功' });
                        this.loading = false;
                        this.tableShow = false;
                        this.getData(0);
                    } else {
                        this.$message({ type: 'warning', message: '修改失败' });
                        this.loading = false;
                        this.tableShow = false;
                        this.getData(0);
                    }

                }).catch(err => {
                    this.loading = false;
                });
            },
            getFiles() {
                var params = {
                    LaserResultID: this.resultInfo.laserResultID
                };
                prjAPI.getTestResultFiles(params).then(res => {
                    res.map(a => {
                        a.checked = false;
                        return
                    });
                    this.graphicText.map(x => {
                        x.checked = false;
                        x.fileList = res.filter(y => y.fileType === x.value);
                        return
                    })
                }).catch(err => {
                });
            },
            uploadFile(item) {
                this.filetype = item.value;
                this.fatherID = this.resultInfo.laserResultID;
                this.$refs.encryptionUpLoad.show();
            },
            uploadOver(data) {
                if (data.length > 0) {
                    this.getFiles();
                } else {
                }
            },
            handlePageChange({ currentPage, pageSize }) {
                this.tablePage.currentPage = currentPage;
                this.tablePage.pageSize = pageSize;
                this.getData();
            },
            preview(row) {
                //const crty = window.localStorage.getItem('isCtrl');
                //if (crty === 'true') return;
                //var loadingFullScreen = this.$loading({
                //    lock: true,
                //    text: '正在转换PDF以供预览，请稍候',
                //    spinner: 'el-icon-loading',
                //    background: 'rgba(0, 0, 0, 0.3)'
                //});
                //GetFileType(row.fileName).then(re => {
                //    this.pdfType = re;
                //    GetFileMap(row.fileName).then(es => {
                //        let type = es;
                //        var params = {
                //            fileid: row.pFileID
                //        };
                //        projectFileAPI.previewGRFile(params).then(res => {
                //            const blob = new Blob([res], { type });
                //            let url = URL.createObjectURL(blob);
                //            this.filePdfUrl = url;
                //            loadingFullScreen.close();
                //            this.$refs.showPdf.show();
                //        }).catch(err => {
                //            loadingFullScreen.close();
                //        });
                //    }).catch(err => {
                //        loadingFullScreen.close();
                //    });
                //}).catch(err => {
                //    loadingFullScreen.close();
                //    this.$message({ type: 'error', message: '不支持该类型文件预览,请下载后查看!' });
                //    if (this.permitDownload === true) {
                //        this.download(row);
                //    }
                //});

            },
            selectFile(row, item) {
                item.fileList.findIndex(x => x.checked === false) > -1 ? item.checked = false : item.checked = true;
            },
            selectAllFile(item) {
                this.graphicText.map(x => {
                    if (x.value === item.value) {
                        x.fileList.map(y => {
                            y.checked = item.checked;
                            return y
                        })
                    }
                    return
                });
            },

            downloadAllFile() {
                var data = [];
                this.graphicText.map(x => {
                    x.fileList.map(y => {
                        if (y.checked) {
                            data.push(y.tdfid)
                        }
                        return
                    })
                    return
                });
                console.log(data)
                if (data.length === 0) {
                    this.$message({ type: 'warning', message: '请选择文件!' });
                    return false
                };


                //prjAPI.downloadZip(data);
                prjAPI.downloadTestResFile(data)
                    .then(res => {
                        const blob = new Blob([res], { type: 'application/zip;charset=utf-8' });
                        if ('download' in document.createElement('a')) {
                            // 非IE下载
                            const elink = document.createElement('a');
                            elink.download = '结果文件' + this.toDate(new Date()) + '.zip';
                            elink.style.display = 'none';
                            elink.href = URL.createObjectURL(blob);
                            document.body.appendChild(elink);
                            elink.click();
                            URL.revokeObjectURL(elink.href);
                            document.body.removeChild(elink);
                        } else {
                            // IE10+下载
                            navigator.msSaveBlob(blob, '结果文件' + this.toDate(new Date()) + '.zip');
                        }
                        this.getFiles();
                    })
            },
            download(row) {
                var data = [];
                data.push(row.tdfid)
                prjAPI.downLoadFile(row.tdfid).then(res => {
                    const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
                    if ('download' in document.createElement('a')) {
                        // 非IE下载
                        const elink = document.createElement('a');
                        elink.download = row.fileName;
                        elink.style.display = 'none';
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        URL.revokeObjectURL(elink.href);
                        document.body.removeChild(elink);
                    } else {
                        // IE10+下载
                        navigator.msSaveBlob(blob, row.fileName);
                    }
                    this.getFiles();
                })

            },
            deleteFile(row) {
                this.$confirm(`是否删除文件?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    var data = [];
                    data.push(row.tdfid)
                    prjAPI.deleteFile(data).then(res => {
                        this.$message({ type: 'success', message: '删除成功!' });
                        this.getFiles();
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false;
                    });
                }).catch(() => { });
            },
            fileClass(row) {
                //console.log(row)
                return {
                    filerow: true,
                    listItem: true
                };
            },
            toDate(date) {
                return date ? moment(date).format('YYYY-MM-DD') : '';
            },
            format(ops, op, hasops) {
                var val = null;
                if (hasops) {
                    var options = ops.map((e) => {
                        return e.options;
                    }).flat().valueOf();
                    val = options.find((e) => e.profID === op);
                } else {
                    val = ops.find((e) => e.profID === op);
                }
                console.log(val);
                return val ? val.profName : "";
            },
            watchKeyDown() {
                var _this = this;
                window.onkeyup = (e) => {
                    e.preventDefault(); // 阻止原有按键功能事件
                    var el = e || window.event || arguments.callee.caller.arguments[0];
                    if (el.keyCode === 27) {
                        _this.editActive.PGCS = false;
                        _this.editActive.KYYJ = false;
                    }
                };
            }
        },
        template: `#template`
    };
</script>
